<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Vue3Marquee } from "vue3-marquee";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import SwiperTemp, { Autoplay, Pagination } from "swiper";
import "swiper/swiper-bundle.css";
import { ActivityAxios, HomeAxios } from "@/api";
import { useRouter } from "vue-router";
import { RouterEnums } from "@/types";
import { UserStore } from "@/store";
import { CountDown } from "vant";
import moment from "moment";
import { useI18n } from "vue-i18n";
import TreasureChestPoster from "@/components/Activit/distriAgent/treasureChestPoster.vue";
const { t } = useI18n();
const userStore = UserStore();
const router = useRouter();
SwiperTemp.use([Pagination, Autoplay]);
const props = defineProps({
  advid: {
    type: String,
    default: "",
  },
});

const banner = ref([] as any);
const $emit = defineEmits([
  "openBottom",
  "leftBannerFun",
  "openMoneyRain",
  "getFloatIconList",
  "popBannerFun",
]);
const message: any = ref([]);
const openBottomed = () => {
  $emit("openBottom", message.value);
};
const listImg: any = ref({ list: [] });
onMounted(async () => {
  getBannerList();
  //获轮播图公告
  getLunBoConfigList();
  getActList();
  if (userStore.isLogin) {
    await getAllGameActRewardNum();
  }
});
//轮播图公告
const getLunBoConfigList = () => {
  HomeAxios.getLunBoConfigList().then(res => {
    message.value = res.list;
  });
};
//更多活动的角标数
const promotionTotal = ref(0);
//获取活动的角标
const actRewardNum: any = ref([]);
const getAllGameActRewardNum = async () => {
  await HomeAxios.getAllGameActRewardNum().then(res => {
    actRewardNum.value = res.list;
    listImg.value.list = listImg.value.list.map(item => {
      let match: any = {
        total: 0,
      };
      if (actRewardNum.value.length > 0) {
        match = actRewardNum.value.find((msgItem: any) => msgItem.actType === item.actType);
      }
      return {
        ...item,
        total: match ? match.total : 0,
      };
    });
    promotionTotal.value = listImg.value.list
      .slice(9)
      .reduce((total, item) => total + item.total, 0);
  });
};

//活动列表
const getActList = async () => {
  await ActivityAxios.getActivityList().then(async res => {
    listImg.value.list = res.list;
    listImg.value.list = listImg.value.list.map(item => {
      if (item.actType === 9) {
        convertToMilliseconds(item.name);
      }
      let match: any = {
        total: 0,
      };
      if (actRewardNum.value.length > 0) {
        match = actRewardNum.value.find((msgItem: any) => msgItem.actType === item.actType);
      }
      return {
        ...item,
        total: match ? match.total : 0,
      };
    });
    const floatIconList = listImg.value.list
      .map(item => {
        if (item.floatIcon !== "") {
          return {
            floatIcon: item.floatIcon,
            actType: item.actType,
          };
        } else {
          return "";
        }
      })
      .filter(item => item !== "");
    $emit("getFloatIconList", floatIconList);
  });
};
//首页Banner活动页面跳转
const gotoPage = data => {
  if (data.jumpWay === 1) {
    if (
      (data.bannerPosition === 3 && data.hyperlinkName === "actRedRain") ||
      (data.bannerPosition === 1 && data.hyperlinkName === "actRedRain")
    ) {
      $emit("openMoneyRain");
    } else {
      router.push(data.hyperlinkName);
    }
  } else {
    window.open(data.hyperlinkName);
  }
};
//广播下面的活动跳转
const gotoActPage = actTypeId => {
  // 1=vip 2=救济金 3=宝箱 4=首充，5=代理返现 6=无限代理 7=等级活动 8=充值赠送 9=红包雨活动 10 = 全局自助打码 11=超级会员日活动 13 pwa安装奖励
  if (actTypeId === 1) {
    //VIP会员
    router.push(RouterEnums.ACTVIP);
  } else if (actTypeId === 2) {
    //救济金
    router.push(RouterEnums.ACTRELIEF);
  } else if (actTypeId === 3) {
    //宝箱
    router.push(RouterEnums.TREASUREChEST);
  } else if (actTypeId === 6) {
    //无限代理==直属代理
    router.push(RouterEnums.DISTRIAGENT);
  } else if (actTypeId === 7) {
    //等级活动
    router.push(RouterEnums.LEVELREWARDSPAGE);
  } else if (actTypeId === 9) {
    //红包雨
    $emit("openMoneyRain");
  } else if (actTypeId === 10) {
    //10 = 全局自助打码
    router.push(RouterEnums.WEBSITEREBATES);
  } else if (actTypeId === 11) {
    //11 = 超级会员日活动
    router.push(RouterEnums.SIPERMEMBERDAY);
  }
};

const minBanner: any = ref([]);
const leftBanner: any = ref([]);
//弹窗海报图
const popBanner: any = ref([]);
const popBannerType: any = ref(false);
// 获取轮播图
const getBannerList = () => {
  HomeAxios.getHomepageBannerConfigList({ advId: props.advid })
    .then((res: any) => {
      const data = res?.list?.filter(item => item.bannerPosition === 1);
      banner.value = data || [];
      const minData = res?.list?.filter(item => item.bannerPosition === 3);
      minBanner.value = minData || [];
      leftBanner.value = res?.list?.filter(item => item.bannerPosition === 2);
      popBanner.value = res?.list?.filter(item => item.bannerPosition === 4);
      $emit("leftBannerFun", leftBanner.value);
      $emit("popBannerFun", popBanner.value);
      popBannerType.value = true;
    })
    .catch(error => console.log(error));
};
const countTimeRef = ref();
//解析字符串
const countDownType: any = ref(0);
function convertToMilliseconds(date) {
  // 尝试将时间字符串解析为 moment 对象
  const time = moment(date, "HH:mm:ss", true);
  // 检查解析是否成功
  if (time.isValid()) {
    // 将时间转换为毫秒
    const hours = time.hours();
    const minutes = time.minutes();
    const seconds = time.seconds();
    const milliseconds = (hours * 3600 + minutes * 60 + seconds) * 1000;
    countDownType.value = 1;

    return Number(milliseconds);
  } else {
    countDownType.value = 0;
    return date;
  }
}
//活动名称国际化过滤函数
const actNameFilter = actTypeId => {
  // 1=vip 2=救济金 3=宝箱 4=首充，5=代理返现 6=无限代理 7=等级活动 8=充值赠送 9=红包雨活动 10 = 全局自助打码 11=超级会员日活动 13 pwa安装奖励
  if (actTypeId === 1) {
    //VIP会员
    return t("activity.actNameList.vip");
  } else if (actTypeId === 2) {
    //救济金
    return t("activity.actNameList.rescue");
  } else if (actTypeId === 3) {
    //宝箱
    return t("activity.actNameList.treasure");
  } else if (actTypeId === 6) {
    //无限代理==直属代理
    return t("activity.actNameList.agent");
  } else if (actTypeId === 7) {
    //等级活动
    return t("activity.actNameList.level");
  } else if (actTypeId === 9) {
    //红包雨
    return t("activity.actNameList.started");
  } else if (actTypeId === 10) {
    //10 = 全局自助打码
    return t("activity.actNameList.rebate");
  } else if (actTypeId === 11) {
    //11 = 超级会员日活动
    return t("activity.actNameList.super");
  }
};
</script>
<template>
  <!-- 广告 -->
  <div class="eventAdvertising-frame">
    <Swiper
      class="swiper-frame"
      ref="refSwiper"
      :autoplay="{ delay: 2000, disableOnInteraction: false }"
      :slides-per-view="1"
      :pagination="true"
      :loop="true"
      :options="true"
    >
      <SwiperSlide class="swiperSlide-frame" v-for="item in banner" :key="item?.id">
        <div class="img-frame">
          <img :src="item?.banner" alt="banner" @click="gotoPage(item)" />
        </div>
      </SwiperSlide>
      <div class="swiper-pagination"></div>
    </Swiper>
    <!-- 小活动图片 -->
    <div class="min-banner-frame" v-if="minBanner.length > 0">
      <div class="min-banner-img" v-for="(item, index) in minBanner" :key="index">
        <img class="banner-img" :src="item?.banner" @click="gotoPage(item)" />
      </div>
    </div>
    <!-- 文字滚动广告 -->
    <div class="roll-broadcast">
      <div class="roll-broadcast-frame df ai-center">
        <img class="broadcast-img" src="@/image/new_img/home/broadcast.svg" />
        <div class="Vue3Marquee-frame">
          <Vue3Marquee :duratio="20" @click="openBottomed">
            <div class="df ai-center">
              <div class="roll-broadcast-constent" v-for="(item, index) in message" :key="index">
                {{ item.content }}
              </div>
            </div>
          </Vue3Marquee>
        </div>
      </div>
    </div>
    <!-- 活动列表 -->
    <div class="activity-list-frame df fw-wrap">
      <div
        v-for="(item, index) in listImg.list"
        :key="index"
        class="activity-conten"
        @click="gotoActPage(item.actType)"
      >
        <div class="activity-img-frame">
          <img
            class="activity-img"
            :src="item.customIcon !== '' ? item.customIcon : item.defaultIcon"
          />
          <div v-if="item.total > 0" class="number-info-frame">{{ item.total }}</div>
        </div>
        <div class="activity-name" v-if="item.actType !== 9">
          {{ actNameFilter(item.actType) }}
        </div>
        <div class="activity-name" v-else>
          <div v-if="countDownType == 1">
            <CountDown
              ref="countTimeRef"
              :time="convertToMilliseconds(item.name)"
              format="HH:mm:ss"
            />
          </div>
          <div v-else>
            {{ actNameFilter(item.actType) }}
          </div>
        </div>
      </div>
      <div v-if="listImg.list.length > 9" class="activity-conten">
        <div class="activity-img-frame">
          <img class="activity-img" src="@/image/new_img/activity/More-img.png" />
          <div class="number-info-frame">{{ promotionTotal }}</div>
        </div>
        <div class="activity-name">
          {{ t("activity.actNameList.promotion") }}
        </div>
      </div>
    </div>
    <TreasureChestPoster v-if="popBannerType" :popBanner="popBanner" />
  </div>
</template>
<style lang="less" scoped>
.eventAdvertising-frame {
  width: calc(100% - 60px);
  height: auto;
  margin-left: 30px;
  --swiper-pagination-color: #fff; /* 两种都可以 */
}
.swiper-frame {
  width: 100%;
  height: 246.88px;
}
.swiperSlide-frame {
  width: 100%;
  height: 246.88px;
}
.img-frame {
  width: 100%;
  height: 246.88px;
  overflow-y: hidden;
  img {
    width: 100%;
    height: 246.88px;
    border-radius: 20px;
  }
}

.inner-block {
  width: 100%;
  height: 216px;
  margin: auto;
}

.roll-broadcast {
  width: 100%;
  height: 82.5px;
  background-size: 100% 100%;
  object-fit: cover;
  margin-top: 10.125px;
  background-color: #ffffff14;
  border-radius: 16px;

  .roll-broadcast-frame {
    width: 94%;
    height: 100%;
    line-height: 62.26px;
    font-size: 18.678px;
    font-weight: 400;
    color: #ffffff;
    overflow-x: hidden;
    margin: auto;
  }
}

.activity-list-frame {
  width: 100%;
  height: auto;
  margin-top: 24px;

  .activity-conten {
    width: 100px;
    height: auto;
    text-align: center;
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 15px;
    margin-right: 47px;
  }

  .activity-conten:nth-child(5n + 0) {
    margin: 0;
  }

  .activity-name {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    text-align: center;
    width: 100%;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8px;
    // margin-left: -10px;
  }
  .activity-img-frame {
    width: 100px;
    height: 100px;
    position: relative;
    left: 0;
    top: 0;
    margin: auto;
    .activity-img {
      width: 100px;
      height: 100px;
    }
    .number-info-frame {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 24.75px;
      height: 24.75px;
      border-radius: 50%;
      background-color: #ffaf00;
      border: 1px solid white;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 18px;
    }
  }
}

.img-style {
  width: 100%;
  height: 216px;
}
.roll-broadcast-constent {
  font-size: 24px;
  margin-left: 40px;
}
.min-banner-frame {
  width: 100%;
  height: auto;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 定义两列等宽布局 */
  gap: 20px; /* 设置列间距 */
  .min-banner-img {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    .banner-img {
      width: auto;
      height: 100px;
      border-radius: 8px;
    }
  }
}
.broadcast-img {
  width: 46px;
  height: 46px;
}
.Vue3Marquee-frame {
  width: 86%;
  margin-left: 20px;
}
:deep(.van-count-down) {
  color: #ffffff73;
  line-height: 24px;
  font-weight: 400;
  font-size: 20px;
}
</style>
